<template>
 <div class="followup-box inner-content">
  <div class="inner inner-content-box">
    <div class="searchBox">
      <el-form :inline="true" :model="searchForm" size="small" style="width: 100%;">
        <el-form-item label="医院编码">
          <el-input v-model="searchForm.hospNo" placeholder="医院编码" clearable style="width: 100px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"  @click="getList" size="small" icon="el-icon-search">搜索</el-button>
          <el-button @click="searchReset" size="small" icon="el-icon-delete">清空</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="detailsBox">
      <ag-grid-vue
        :localeText="localeText"
        class="ag-theme-alpine ag-theme-quartz"
        @grid-ready="onGridReady"
        @sort-changed="onSortChangedAggrid"
        @filter-changed="onFilterChangedAggrid"
        :rowHeight="38"
        :headerHeight="42"
        :columnDefs="columnDefs"
        :defaultColDef="defaultColDef"
        :rowData="rowData">
      </ag-grid-vue>
    </div>
    <div class="pageBox">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :page-sizes="page.pageSizes"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
    </div>
  </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      page: {
        pageSizes: [100, 2000, 5000],
        currentPage: 1,
        total: 0,
        pageSize: 100
      },
      searchForm: {
        hospNo: ''
      },
      defaultColDef: {
        editable: false,
        sortable: true,
        resizable: true,
        filter: true,
        cellDataType: false
      },
      columnDefs: [
        {
          field: 'rowIndex',
          headerName: '序号',
          width: 80,
          checkboxSelection: false,
          headerCheckboxSelection: false,
          sortable: false,
          pinned: 'left',
          valueGetter: (params) => {
            // 返回当前行的序号
            return params.node.rowIndex + 1
          }
        },
        { field: 'make', 'filter': 'agMultiColumnFilter', flex: 1 },
        { field: 'model', flex: 1 }
      ],
      gridApi: null,
      rowData: [
        { make: 'Toyota', model: 'Celica', price: 35000 },
        { make: 'Ford', model: 'Mondeo', price: 32000 },
        { make: 'Porsche', model: 'Boxster', price: 72000 },
        { make: 'BMW', model: 'M50', price: 60000 }
      ]
    }
  },
  methods: {
    onSortChangedAggrid (event) {
      const api = event.api
      const visibleRowCount = api.getDisplayedRowCount()
      for (let i = 0; i < visibleRowCount; i++) {
        const rowNode = api.getDisplayedRowAtIndex(i)
        console.log(rowNode)
      }
      let aaa = JSON.parse(JSON.stringify(this.rowData))
      if (this.gridApi.getRenderedNodes().length > 1) {
        this.aggridScrollNum = this.gridApi.getRenderedNodes()[1].rowIndex - 1
      } else {
        this.aggridScrollNum = this.gridApi.getRenderedNodes()[0].rowIndex
      }
      setTimeout(() => {
        this.rowData = JSON.parse(JSON.stringify(aaa))
        setTimeout(() => {
          if (this.aggridScrollNum !== 0) {
            this.gridApi.ensureIndexVisible(this.aggridScrollNum, 'top')
          }
        }, 10)
      }, 10)
    },
    onFilterChangedAggrid (event) {
      const api = event.api
      const visibleRowCount = api.getDisplayedRowCount()
      for (let i = 0; i < visibleRowCount; i++) {
        const rowNode = api.getDisplayedRowAtIndex(i)
        console.log(rowNode)
      }
      let aaa = JSON.parse(JSON.stringify(this.rowData))
      if (this.gridApi.getRenderedNodes().length > 1) {
        this.aggridScrollNum = this.gridApi.getRenderedNodes()[1].rowIndex - 1
      } else {
        this.aggridScrollNum = this.gridApi.getRenderedNodes()[0].rowIndex
      }
      setTimeout(() => {
        this.rowData = JSON.parse(JSON.stringify(aaa))
        setTimeout(() => {
          if (this.aggridScrollNum !== 0) {
            this.gridApi.ensureIndexVisible(this.aggridScrollNum, 'top')
          }
        }, 10)
      }, 10)
    },
    // 装载列表
    onGridReady (params) {
      this.gridApi = params.api
    },
    getList () {},
    handleSizeChange (val) {
      this.page.pageSize = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.page.currentPage = val
      this.getList()
    },
    // 清空搜索
    searchReset () {
      this.searchForm = {}
      this.page.currentPage = 1
      // this.getList();
    }
  }
}
</script>